import React, { Component,createRef } from 'react'

export default class TestRef extends Component {
    pRef = createRef()
    render() {
        return (
            <>
                <h3 ref='ss'>字符串</h3>

                <div ref={(el)=>{
                    console.log('el: ', el)
                    this.divRef = el
                }}>回调函数</div>


                <p ref={this.pRef}>绑定ref对象</p>

                <p><button onClick={()=>{
                    // this.refs即将废弃
                    console.log(this.refs.ss)
                    this.refs.ss.style.color = 'red'

                    console.log('div ref: ', this.divRef)
                    this.divRef.style.fontSize = '25px'

                    // 绑定一个ref对象
                    console.log(this.pRef.current)

                    this.pRef.current.style.backgroundColor = '#ddd'

                }}>获取ref对象</button></p>
            </>
        )
    }
}
